<template>
	<view class="big-box flex-col align-center">
		<top-navigation bgColor='rgb(22, 22, 30)' :isBack="true" backIconColor='#FFF' isFix isShow>
			<text slot='center-slot' class="center-slot">玩法攻略</text>
		</top-navigation>
		<view class="content">
		<!-- 	<image @tap="playTap(v)" class="paly-img" :src="`/static/images/starmap/playfunc/map${map}-${v}.png`"
				mode="widthFix" v-for="v,k in imgList"></image> -->
				<image @tap="playTap(k)" class="paly-img" :src="v"
					mode="widthFix" v-for="v,k in imgList"></image>
		</view>
		<view class="uni-margin-wrap" v-if="isSwiperShow">
			<view class="close" @tap="playTap(1)">
				<u-icon name="close" color="#FFF" size="28"></u-icon>
			</view>
			<swiper class="swiper" :current='current'>
				<swiper-item v-for="v,k in imgList">
					<view class="swiper align-center">
						<image @tap="playTap(k)" class="paly-img" :src="v"
							mode="widthFix"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>


	</view>
</template>

<script>
	export default {

		data() {
			return {
				isSwiperShow: false,
				current: 0,
				map: 1,
				imgList:[]


			}
		},
		onLoad(o) {
			if (o.map) {
				this.map = o.map
				this.getPlayImg()
			}
			
		},
		methods: {
			async getPlayImg(){
				let url = '/api/v1/introduction'
				let {
					code,
					msg,
					data
				} = await this.$getRequest(url,
				{map:this.map}
				)
				if (code == 200) {
					console.log(data, '静态资源');
					this.imgList = data.list || []
				} else {
					this.$refs.uToast.show({
						message: msg
					})
				}
			},
			bannnerBtn(e) {
				console.log(e, 'bannnerBtn');
				if ((this.current + 1) == this.featureGroup.length) {
					// 到达最后一个应该去第一个
					this.current = e > 0 ? 0 : this.current + e
					return
				}
				if (this.current == 0) {
					this.current = e > 0 ? this.current + e : this.featureGroup.length - 1
					return
				}
				this.current += e
				console.log('this.current', this.current);
				// banner按钮点击
			},
			playTap(v) {
				this.current = v
				this.isSwiperShow = !this.isSwiperShow
				// banner点击
			},

		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		width: 100vw;
		min-height: 100vh;
		background: url('/static/images/starmap/top-bg.jpg') #16161e no-repeat top center / 100% 1094rpx;

		.center-slot {
			color: #FFF;
		}

		.uni-margin-wrap {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: #00000050;
			z-index: 50;

			.close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				z-index: 51;
			}
		}

		.swiper {
			width: 100vw;
			height: 100vh;

			.paly-img {
				width: 100%;
				display: block;
			}
		}

		.content {
			width: 100vw;

			.paly-img {
				width: 100%;
				display: block;
			}
		}
	}
</style>